<template>
  <div class="hello"></div>
</template>

<script lang="ts">
// import { Options, Vue } from "vue-class-component";

// @Options({
//   props: {
//     msg: String,
//   },
//   setup() {
//     console.log("setup");
//   },
// })
// export default class HelloWorld extends Vue {
//   msg!: string;
// }
export default {
  name: "HelloWorld",
  setup() {
    const a = function (a: number, b: number): number {
      return a + b;
    };
    a(1, 4);
    let b: any; // any会关闭ts对变量的类型检测，赋值给别的变量时，也会是被赋予的的变量失去ts的类型检测
    let c; // 只声明，不指定类型，会被ts判断为any，成为隐式any
    let d: unknown; // unknown，表示未知类型，可以给任意类型的值。此类型变量不能赋值给其它变量
    // 类型断言，用来告诉解析器，变量的实际类型
    let e = "123";
    let s: string;
    s = e as string;
    // s = <string>e;
    // void 表示空值，以函数为例，表示没有返回值
    // never 表示永远不会返回结果
    let f: { name: string; age?: number; [propName: string]: any }; // ？表示属性可选;propName: string]: any 表示任意类型的属性,多个可选属性的集合
    f = {
      name: "string",
      flex: "wan",
    };
    class Person {
      name: string;
      age: number;
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      // readonly name = "wer"; // 禁止修改
      // static age = 15; // 静态属性，可通过Person调用，实例不可用
    }

    let wang = new Person("wang", 18);
    class Name {
      name: string;
      constructor(name) {
        this.name = name;
      }
      say() {
        // console.log("say");
      }
    }
    class m extends Name {
      age: number;
      constructor(name, age) {
        super(name);
        this.age = age;
      }
      say1() {
        // console.log("say1");
      }
    }
    const n = new m("wang", 12);
    n.say();
    n.say1();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
